<template>
  <div>
    <el-row :gutter="20" style="min-width: 1400px">
      <el-col :span="6">
        <el-card class="box-card">
          <div class="text">{{ section1Extra.title }}</div>
          <div class="money">
            <span class="symbol">￥</span
            ><span class="int">{{ section1Data.count }}</span>
            <!-- <span class="float">{{
              section1Data.count.split(".")[1]
                ? "." + section1Data.count.split(".")[1]
                : ""
            }}</span> -->
          </div>
          <img
            :src="require(`@/assets/imgs/work/${section1Extra.img}`)"
            class="img"
          />
          <Compare :info="section1Data" />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div class="text">{{ section2Extra.title }}</div>
          <div class="money">
            <span class="symbol" v-if="section2Extra.title != '订单量'"
              >￥</span
            >
            <span class="int">{{ section2Data.count }}</span>
            <!-- <span class="float">{{
              section2Data.total.split(".")[1]
                ? "." + section2Data.total.split(".")[1]
                : ""
            }}</span> -->
          </div>
          <img
            :src="require(`@/assets/imgs/work/${section2Extra.img}`)"
            class="img"
          />
          <Compare :info="section2Data" />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div class="text">{{ section3Extra.title }}</div>
          <div class="money">
            <span class="symbol" v-if="section3Extra.title != '新增用户数量'"
              >￥</span
            ><span class="int">{{ section3Data.count }}</span>
            <!-- <span class="float">{{
              section3Data.total.split(".")[1]
                ? "." + section3Data.total.split(".")[1]
                : ""
            }}</span> -->
          </div>
          <img
            :src="require(`@/assets/imgs/work/${section3Extra.img}`)"
            class="img"
          />
          <Compare :info="section3Data" />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card last">
          <el-avatar
            :src="
              getUserInfo().headUrl
                ? imgUrl
                : require('@/assets/imgs/geren/info3.png')
            "
            class="avatar"
          ></el-avatar>
          <div class="nameWrap">
            <el-tooltip
              class="item"
              effect="dark"
              :content="getUserInfo()?.realName || '管理员'"
              placement="top"
            >
              <span class="name">{{
                getUserInfo()?.realName || "管理员"
              }}</span>
            </el-tooltip>
            <span class="tag">{{ getUserInfo()?.roleName || "管理员" }}</span>
          </div>
          <el-input
            placeholder="任何不知道，这里找答案"
            v-model="value1"
            @keyup.enter.native="searchFromWebsite"
            clearable
          >
            <i slot="prefix" class="el-input__icon el-icon-search-outlined"></i>
            <!-- <i
              slot="prefix"
              class="el-input__icon el-icon-search-outlined"
              style="cursor: pointer"
              @click="searchFromWebsite"
            ></i> -->
          </el-input>
          <div class="hintT">
            不确定如何使用？请查看<span class="apiDoc" @click="openApiDoc"
              >操作手册</span
            >
          </div>
          <div class="footer">
            <div class="one_"></div>
            <div class="two_"></div>
            <div class="three_"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px; min-width: 1400px">
      <el-col :span="18">
        <el-card class="box-card2 echarts">
          <div id="chart" style="width: 100%; height: 370px"></div>
          <div class="timeCycle">
            <div
              :class="timeCycleVal === 0 ? 'activeTime' : ''"
              @click="handleTimeCycle(0)"
            >
              今日
            </div>
            <div
              :class="timeCycleVal === 7 ? 'activeTime' : ''"
              @click="handleTimeCycle(7)"
            >
              近7天
            </div>
            <div
              :class="timeCycleVal === 30 ? 'activeTime' : ''"
              @click="handleTimeCycle(30)"
            >
              近30天
            </div>
            <!-- <div :class="timeCycleVal === '4' ? 'activeTime' : ''" @click="timeCycleVal = '4'">近三月</div> -->
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card2 last">
          <div class="orderText">{{ section4Extra.title }}</div>
          <Compare :info="section4Data" />
          <el-progress
            type="circle"
            class="progress"
            :percentage="
              section4Data.conversionRate == '-'
                ? 0
                : Number(section4Data.conversionRate)
            "
            :show-text="false"
            color="#44E3B1"
            stroke-linecap="butt"
            :width="176"
            :stroke-width="30"
          >
          </el-progress>
          <div class="trans">
            {{ section4Extra.desc }}<br />
            <span class="transNum">
              {{
                section4Data.conversionRate == "-"
                  ? section4Data.conversionRate
                  : `${section4Data.conversionRate}%`
              }}
              <!-- {{
              section4Data.conversionRate == "-"
                ? "-"
                : Number(section4Data.conversionRate) &lt;1? `&lt; 1%`:
                `${section4Data.conversionRate}%`
              }} -->
            </span>
          </div>
          <div class="order">
            <div>
              <div class="orderNum">{{ section4Data.totalCount }}</div>
              <div style="font-size: 14px">{{ section4Extra.foot1 }}</div>
            </div>
            <div>
              <div class="orderNum">{{ section4Data.orderCount }}</div>
              <div style="font-size: 14px">{{ section4Extra.foot2 }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px; min-width: 1400px">
      <el-col :span="18">
        <el-card style="border-radius: 14px">
          <div class="finance">{{ section6Extra.title }}</div>
          <el-table :data="section6List">
            <template slot="empty">
              <el-empty
                :image="require('@/assets/imgs/middleWork/k1.png')"
                :image-size="80"
                description="暂无相关数据"
              ></el-empty>
            </template>
            <el-table-column
              show-overflow-tooltip
              prop="date"
              align="center"
              label="创建时间"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="incomeAmountTotal"
              sortable
              align="center"
              label="收入/元"
            >
              <template slot-scope="scope">
                <div
                  style="
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                >
                  {{
                    Number(scope.row.incomeAmountTotal)
                      ? scope.row.incomeAmountTotal
                      : "0.00"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="payoutAmountTotal"
              sortable
              align="center"
              label="支出/元"
            >
              <template slot-scope="scope">
                <div
                  style="
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                >
                  {{
                    Number(scope.row.payoutAmountTotal)
                      ? scope.row.payoutAmountTotal
                      : "0.00"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="serviceAmount"
              sortable
              align="center"
              label="手续费/元"
            >
              <template slot-scope="scope">
                <div
                  style="
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                >
                  {{
                    Number(scope.row.feeAmountTotal)
                      ? scope.row.feeAmountTotal
                      : "0.00"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="name"
              align="center"
              label="日报表"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.date == newDate">当日报表于次日生成</div>
                <div v-else>
                  <div
                    v-if="
                      !Number(scope.row.payoutAmountTotal) &&
                      !Number(scope.row.incomeAmountTotal) &&
                      !Number(scope.row.serviceAmount)
                    "
                  >
                    -
                  </div>
                  <el-button
                    v-else
                    @click="downFn(scope.row)"
                    v-throttle="1000"
                    type="primary"
                    class="tableBtn"
                    >下载</el-button
                  >
                </div>
              </template>
            </el-table-column>

            <el-table-column
              show-overflow-tooltip
              prop="address"
              align="center"
              label="渠道对账单"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.date == newDate">
                  当日报表于次日12:00生成
                </div>
                <div v-else>
                  <div
                    v-if="
                      !Number(scope.row.payoutAmountTotal) &&
                      !Number(scope.row.incomeAmountTotal) &&
                      !Number(scope.row.serviceAmount)
                    "
                  >
                    -
                  </div>
                  <el-button
                    v-else
                    @click="channelDownFn(scope.row)"
                    v-throttle="1000"
                    type="primary"
                    class="tableBtn"
                    :disabled="scope.row.channelBillFileCreated == false"
                    >下载</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card3 last">
          <div class="orderText">支付渠道</div>
          <div id="chart2" style="width: 100%; height: 400px"></div>
        </el-card>

        <div class="ofenFun">
          <div class="finance">常用功能</div>
          <div
            class="box"
            v-for="item of funList"
            :key="item.id"
            @click="$router.push(item.menuUrl)"
          >
            <div class="box_title">{{ item.menuName }}</div>
            <i
              class="el-icon-arrow-right"
              @click="$router.push(item.menuUrl)"
            ></i>
          </div>
          <img
            src="@/assets/imgs/work/custom.png"
            style="width: 100%; cursor: pointer"
            @click="addDialog = true"
          />
        </div>
      </el-col>

      <!-- <el-col :span="6">
        <div class="finance">常用功能</div>
        <div
          class="box"
          v-for="item of funList"
          :key="item.id"
          @click="$router.push(item.menuUrl)"
        >
          <div class="box_title">{{ item.menuName }}</div>
          <i
            class="el-icon-arrow-right"
            @click="$router.push(item.menuUrl)"
          ></i>
        </div>
        <img
          src="@/assets/imgs/work/custom.png"
          style="width: 100%; cursor: pointer"
          @click="addDialog = true"
        />
      </el-col> -->
    </el-row>
    <AddFunVue
      v-if="addDialog"
      :addDialog.sync="addDialog"
      :list="funList"
      @updateList="getFunList"
    />

    <el-dialog
      class="cardDialog"
      :visible.sync="chargeDia"
      :show-close="false"
      width="480px"
      top="30vh"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <!-- <div class="addTitle">
        <span>选择需要下载的渠道对账单</span>
      </div> -->
      <div class="tip">选择需要下载的渠道对账单</div>
      <el-form ref="form" :rules="rules" :model="form">
        <el-form-item prop="dChannel" label-position="top">
          <el-select
            v-model="form.dChannel"
            placeholder="请选择"
            class="width512"
          >
            <!-- <el-option
              label="汇付"
              value="ada"
              v-if="getUserInfo().userType != 'sub_admin'"
            >
            </el-option>
            <el-option label="微信" value="wechat"> </el-option>
            <el-option label="支付宝" value="ali"> </el-option>
            <el-option label="银联" value="union"> </el-option>
            <el-option label="抖音" value="douyin"> </el-option>
            <el-option label="银盛" value="yse"> </el-option> -->
            <el-option
              v-for="(key,idx) in Object.keys(options)"
              :key="idx"
              :label="options[key]"
              :value="key"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cencelReset">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";
import Compare from "@/components/compare.vue";
import AddFunVue from "./addFun.vue";
import { getUserInfo } from "@/utils/public";
import services from "@/types/services";
import cObj from "@/utils/config";

export default {
  name: "workBench",
  data() {
    return {
      form: {
        dChannel: "",
      },
      rules: {
        dChannel: [
          { required: true, message: "请选择渠道", trigger: "change" },
        ],
      },
      options: [
        {
          value: "ada",
          label: "汇付",
        },
        {
          value: "wechat",
          label: "微信",
        },
        {
          value: "ali",
          label: "支付宝",
        },
      ],
      chargeDia: false,
      curRow: {},
      newDate: this.$moment(new Date()).format("YYYY-MM-DD"),
      imgUrl: "",
      value1: "",
      addDialog: false,
      timeCycleVal: 0,

      section1Data: {},
      section1Extra: {
        title: "支付总额",
        img: "one.png",
      },
      section2Data: {},
      section2Extra: {
        title: "分账金额",
        img: "two.png",
      },
      section3Data: {},
      section3Extra: {
        title: "在途金额",
        img: "three.png",
      },
      section4Data: {
        conversionRate: 0,
      },
      section4Extra: {
        title: "订单转换率",
        desc: "转化率",
        foot1: "订单总量",
        foot2: "支付订单量",
      },
      section6List: [],
      section6Extra: {
        title: "财务汇总",
      },
      chartType: "subPayment",
      echartsData: {},
      echartsExtra: {
        title: "订单总额VS分账金额",
        legend: ["订单总额(元)", "分账金额(元)"],
        series: {
          name1: "订单总额(元)",
          name2: "分账金额(元)",
        },
      },
      // orderTotalAmount: {
      //   total: "0",
      // },
      // settleTotalAmount: {
      //   total: "0",
      // },
      // waitSettleTotalAmount: {
      //   total: "0",
      // },
      // orderTotal: {},
      // dataList: [],
      funList: [],
      channelList: [],
      legendList: [],
      colorList: [],
    };
  },
  components: {
    Compare,
    AddFunVue,
  },
  watch: {
    "$store.state.testLine": {
      handler() {
        if (this.$route.name == this.$options.name) {
          this.getFunList();
        }
      },
    },
    deep: true,
  },
  created() {
    // console.log(new Date().get)
    // console.log(getUserInfo())
    if (this.$store.state.mealList.length) {
      this.getWorkApiType(this.$store.state.mealList);
    }
    this.$store.dispatch("getTree");
    if (getUserInfo().headUrl) {
      this.imgUrl =
        window.location.origin +
        `/merchantApi/oss/view?id=${getUserInfo().headUrl}`;
    }
    this.getFunList();
    // this.$http.get("/api/workBench/orderTotalAmount").then((res) => {
    //   if (res.code === "0000") {
    //     this.orderTotalAmount = res.data;
    //   }
    // });
    // this.$http.get("/api/workBench/settleTotalAmount").then((res) => {
    //   if (res.code === "0000") {
    //     this.settleTotalAmount = res.data;
    //   }
    // });
    // this.$http.get("/api/workBench/waitSettleTotalAmount").then((res) => {
    //   if (res.code === "0000") {
    //     this.waitSettleTotalAmount = res.data;
    //   }
    // });
    // this.$http.get("/api/workBench/orderTotal").then((res) => {
    //   if (res.code === "0000") {
    //     this.orderTotal = res.data;
    //   }
    // });
    // this.$http.get("/api/workBench/orderStreamGroupByDay").then((res) => {
    //   if (res.code === "0000") {
    //     this.dataList = res.data;
    //   }
    // });

    // this.getEchartsData("today");
  },
  methods: {
    cencelReset() {
      this.chargeDia = false;
      this.$refs.form.resetFields(); //重置状态
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log(this.form);
          this.$http
            .post(`/api/bill/downloadCenter/createChannelBill`, {
              billDate: this.curRow.date,
              payformChannel: this.form.dChannel,
              memberId: "",
            })
            .then((res) => {
              if (res.code === "0000") {
                this.$message.success("已添加到下载中心！");
                this.cencelReset();
              }
            });
        } else {
          return false;
        }
      });
    },
    getWorkApiType(serverList) {
      let apis = [];
      let mealList = [];
      serverList &&
        serverList.length &&
        serverList.forEach((item) => {
          item.mealType && mealList.push(item.mealType);
        });
      console.log(mealList);
      switch (mealList.length) {
        case 0:
        case 1:
          //融聚交易
          // eslint-disable-next-line no-case-declarations
          let server = services.find(
            (service) => service.mealType.toString() == "charge"
          );
          apis = server.apis;
          break;
        case 2:
          if (serverList.find((item) => item.mealType == "merchant")) {
            //多级商户
            let server = services.find(
              (service) =>
                service.mealType.toString().indexOf("merchant") !== -1
            );
            apis = server.apis;
          } else if (serverList.find((item) => item.mealType == "account")) {
            //用户账户
            let server = services.find(
              (service) => service.mealType.toString().indexOf("account") !== -1
            );
            apis = server.apis;
          }
          break;
        case 3:
          services.forEach((ser) => {
            if (
              ser["mealType"].indexOf("merchant") !== -1 &&
              ser["mealType"].indexOf("account") !== -1
            ) {
              apis = ser.apis;
            }
          });
          break;
      }
      console.log(apis);
      this.fetchApi(apis);
    },
    fetchApi(apis) {
      console.log(apis);
      apis.forEach((api) => {
        switch (api.name) {
          case "支付总额":
            this.$http.get(api.api).then((res) => {
              if (res.code === "0000") {
                this.section1Data = res.data;
                this.section1Extra = {
                  title: res.data.title,
                  img: res.data.imgUrl,
                };
              }
            });
            break;
          case "分账金额":
          case "订单量":
            this.$http.get(api.api).then((res) => {
              if (res.code === "0000") {
                this.section2Data = res.data;
                this.section2Extra = {
                  title: res.data.title,
                  img: res.data.imgUrl,
                };
              }
            });
            break;
          case "在途金额":
          case "平均客单价":
          case "新增用户量":
            this.$http.get(api.api).then((res) => {
              if (res.code === "0000") {
                this.section3Data = res.data;
                this.section3Extra = {
                  title: res.data.title,
                  img: res.data.imgUrl,
                };
              }
            });
            break;
          case "订单转换率":
            // console.log(api.api);
            this.$http.get(api.api).then((res) => {
              if (res.code === "0000") {
                this.section4Data = res.data;
                console.log(res.data);
                this.section4Extra = {
                  title: res.data.title,
                  desc: "转化率",
                  foot1: "订单总量",
                  foot2: "支付订单量",
                };
              }
            });
            break;
          case "分账占比":
            this.$http.get(api.api).then((res) => {
              if (res.code === "0000") {
                this.section4Data = res.data;
                this.section4Extra = {
                  title: res.data.title,
                  desc: "分账比例",
                  foot1: "订单总量",
                  foot2: "分账订单",
                };
              }
            });
            break;
          case "支付渠道":
            this.$http.get(api.api).then((res) => {
              if (res.code === "0000") {
                console.log(res.data);
                this.legendList = res.data.channel.map((item) => {
                  switch (item) {
                    case "ada":
                      return "汇付";
                    case "wechat":
                      return "微信";
                    case "ali":
                      return "支付宝";
                    case "union":
                      return "银联";
                    case "douyin":
                      return "抖音";
                    case "yse":
                      return "银盛";
                  }
                });
                this.channelList = res.data.channel;
                // console.log(res.data.channel);
                // console.log(this.legendList);
                // console.log(this.channelList);
                // console.log(res.data);
                this.yList = res.data.group.map((item) => item.day);
                let test = [];
                let colortest = [];
                this.channelList.forEach((channel, idx) => {
                  test.push({
                    // name: channel,
                    name:
                      channel == "ada"
                        ? "汇付"
                        : channel == "wechat"
                        ? "微信"
                        : channel == "ali"
                        ? "支付宝"
                        : channel == "douyin"
                        ? "抖音"
                        : channel == "yse"
                        ? "银盛"
                        : "银联",
                    type: "bar",
                    stack: "total",
                    emphasis: {
                      focus: "series",
                    },
                    data: [],
                  });
                  colortest.push({
                    color:
                      channel == "ada"
                        ? "#5D7092"
                        : channel == "wechat"
                        ? "#5AD8A6"
                        : channel == "ali"
                        ? "#5B8FF9"
                        : channel == "douyin"
                        ? "#24EFEB"
                        : channel == "yse"
                        ? "#137CD7"
                        : "#006A65",
                  });
                  res.data.group.forEach((dayItem) => {
                    // console.log(item.channelGroupList.filter(c=> c.channel == channel))
                    dayItem.channelGroupList.filter((c) => {
                      if (c.channel == channel) {
                        // console.log(Math.trunc(c.rate * 100));
                        // test[idx]["data"].push(Math.trunc(c.rate * 100));
                        test[idx]["data"].push(c.rate);
                      }
                    });
                  });
                });
                //console.log(colortest);
                this.chaDataList = test;
                colortest.forEach((e) => {
                  this.colorList.push(e.color);
                });
                this.initChart2();
              }
            });
            break;
          case "财务汇总":
            this.$http.get(api.api).then((res) => {
              if (res.code === "0000") {
                this.section6List = res.data;
                this.section6Extra = {
                  title: "财务汇总",
                };
              }
            });
            break;
          case "支付总额VS分账金额":
            this.$http
              .get(api.api, {
                // params: {
                //   nearType: "today",
                // },
                params: {
                  days: 0,
                  chartType: "subPayment",
                },
              })
              .then((res) => {
                if (res.code === "0000") {
                  // console.log(api.api);
                  // console.log(res.data);
                  this.chartType = "subPayment";
                  this.echartsData = res.data;
                  this.echartsExtra = {
                    title: "支付总额 VS 分账金额",
                    legend: ["支付总额(元)", "分账金额(元)"],
                    series: {
                      name1: "支付总额(元)",
                      name2: "分账金额(元)",
                    },
                  };
                  this.initChart();
                }
              });
            break;
          case "订单总额VS支付总额":
            this.$http
              .get(api.api, {
                params: {
                  days: 0,
                  chartType: "totalPayment",
                },
              })
              .then((res) => {
                if (res.code === "0000") {
                  //console.log(res.data);
                  this.chartType = "totalPayment";
                  this.echartsData = res.data;
                  this.echartsExtra = {
                    title: "支付总额 VS 订单总额",
                    legend: ["支付总额(元)", "订单总额(元)"],
                    series: {
                      name1: "支付总额(元)",
                      name2: "订单总额(元)",
                    },
                  };
                  this.initChart();
                }
              });
            break;
          default:
            break;
        }
      });
    },
    getUserInfo,
    downFn(row) {
      this.$http
        .post(`/api/bill/downloadCenter/createYuncnBill`, {
          billDate: row.date,
          dataType: "current_member",
          billType: "yuncnpay",
          memberId: "",
        })
        .then((res) => {
          if (res.code === "0000") {
            this.$message.success("已添加到下载中心！");
          }
        });
    },
    channelDownFn(row) {
      this.options = row.channelMap;
      this.curRow = row;
      this.chargeDia = true;
    },
    getEchartsData(val) {
      this.$http
        .get("/api/merchant/index/orderChart", {
          params: {
            days: val,
            chartType: this.chartType,
          },
        })
        .then((res) => {
          if (res.code === "0000") {
            this.echartsData = res.data;
            this.initChart();
          }
        });
    },
    getFunList() {
      this.$http.get("/api/workBench/oftenList").then((res) => {
        if (res.code === "0000") {
          this.funList = res.data;
        }
      });
    },
    handleTimeCycle(val) {
      if (val !== this.timeCycleVal) {
        this.timeCycleVal = val;
        this.getEchartsData(val);
      }
    },
    handelDown() {
      //console.log(1);
    },
    searchFromWebsite() {
      window.open(`${cObj.websiteUrl}helpAbout`);

      // if (process.env.VUE_APP_ENV == "production") {
      //   window.open("http://yuncnpay.com/helpAbout");
      // } else if (process.env.VUE_APP_ENV == "test") {
      //   window.open("http://192.168.2.142:30004/helpAbout");
      // } else if (process.env.VUE_APP_ENV == "pre") {
      //   window.open("http://pre.yuncnpay.com/helpAbout");
      // } else {
      //   window.open(`http://${window.location.hostname}:30004/helpAbout`);
      // }
    },
    openApiDoc() {
      window.open("/结算系统产品使用手册.pdf");
    },
    initChart() {
      const chartDom = document.getElementById("chart");
      const myChart = echarts.init(chartDom);
      window.onresize = myChart.resize;
      let option;
      option = {
        title: {
          text: this.echartsExtra.title,
          textStyle: {
            fontSize: 18,
          },
        },
        tooltip: {
          trigger: "axis",
          formatter(params) {
            console.log(params);
            var relVal = params[0].name;
            for (var i = 0, l = params.length; i < l; i++) {
              relVal +=
                "<br/>" +
                params[i].marker +
                params[i].seriesName +
                " : " +
                Number(params[i].value).toFixed(2);
            }
            return relVal;
          },
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          icon: "roundRect",
          itemHeight: 6,
          itemWidth: 20,
          orient: "horizontal",
          data: this.echartsExtra.legend,
          left: "18%",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            axisLine: { onZero: false },
            type: "category",
            data: this.echartsData.xaxis,
            // axisTick: {
            //     alignWithLabel: true
            // },
            boundaryGap: false,

            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            axisLine: { onZero: true },
            axisLabel: {
              formatter: "{value} ",
            },
            // data: ['0', '1', '2', '300', '400', '500', '600', '700', '800'],
            boundaryGap: false,
            // type: 'category',
            splitLine: { show: false },
          },
        ],
        series: [
          {
            name: this.echartsExtra.series.name1,
            type: "line",
            // stack: "Total",
            showSymbol: false,
            color: "#4763EA",
            areaStyle: {
              opacity: 0.06,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#C789F4", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#9551E6", // 100% 处的颜色
                  },
                ],
              },
            },
            smooth: true,

            emphasis: {
              focus: "series",
            },
            data: this.echartsData.yaxis["order"],
          },
          {
            name: this.echartsExtra.series.name2,
            type: "line",
            smooth: true,
            showSymbol: false,

            color: "#00ABA5",
            areaStyle: {
              opacity: 0.06,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#37C8E8", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#43B6ED", // 100% 处的颜色
                  },
                ],
              },
            },
            emphasis: {
              focus: "series",
            },
            data: this.echartsData.yaxis["valus"],
          },
        ],
      };
      option && myChart.setOption(option);
    },
    initChart2() {
      const chartDom2 = document.getElementById("chart2");
      const myChart2 = echarts.init(chartDom2);
      window.onresize = myChart2.resize;
      var option2;
      option2 = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line", // 'shadow' as default; can also be 'line' or 'shadow'
          },
          formatter: function (params) {
            //console.log(params);
            let str = ``;
            params.forEach((item, idx) => {
              str += `${item.marker} ${item.seriesName}: ${item.data}%`;
              str += idx === params.length - 1 ? "" : "<br/>";
            });
            return str;
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        legend: {
          icon: "roundRect",
          itemHeight: 8,
          itemWidth: 8,
          orient: "horizontal",
          data: this.legendList,
          left: "0%",
        },
        xAxis: [
          // {
          //    // name: "%", //关键代码
          //   // nameTextStyle: {
          //   //   //关键代码
          //   //   padding: [30, 0, 10, -10],
          //   // },
          //    // axisLabel: {
          //   //   interval: 0,
          //   //   rotate: 28, //倾斜度
          //   // },
          // }
          {
            type: "value",
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: {
          type: "category",
          data: this.yList,
        },
        series: this.chaDataList,
        // [
        //   {
        //     name: "wechat",
        //     type: "bar",
        //     stack: "total",
        //     emphasis: {
        //       focus: "series",
        //     },
        //     data: [10, 20, 30, 30, 20, 15, 20],
        //   },
        //   {
        //     name: "ada",
        //     type: "bar",
        //     stack: "total",
        //     emphasis: {
        //       focus: "series",
        //     },
        //     data: [10, 20, 30, 30, 20, 15, 20],
        //   },
        //   {
        //     name: "ali",
        //     type: "bar",
        //     stack: "total",
        //     emphasis: {
        //       focus: "series",
        //     },
        //     data: [10, 20, 30, 30, 20, 15, 20],
        //   },
        // ],
        color: this.colorList,
      };
      option2 && myChart2.setOption(option2);
    },
  },
};
</script>

<style lang="scss" scoped>
.width512 {
  width: 400px;
}
.cardDialog {
  .addTitle {
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.85);
  }
  .tip {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
    margin-top: 12px;
    margin-bottom: 30px;
    span {
      color: #03bfc6;
    }
  }
  .tip1 {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #869daa;
    // line-height: 17px;
  }
  :deep(.el-form-item--small.el-form-item:nth-of-type(2)) {
    margin-bottom: 0;
  }
  :deep(.el-dialog) {
    border-radius: 16px;
  }
  :deep(.el-dialog__body) {
    padding: 10px 40px;
    padding-bottom: 60px;
  }
  :deep(.el-button--small) {
    width: 74px;
  }
  :deep(.el-input__inner) {
    padding-left: 12px;
  }
  :deep(.el-form-item__content) {
    position: relative;
  }
  .form-img {
    width: 22px;
    border-radius: 22px;
    position: absolute;
    top: 5px;
    left: 10px;
    z-index: 1;
  }
}
.box-card {
  padding: 0 10px;
  position: relative;
  border-radius: 14px;
  height: 220px;
  .text {
    color: #666;
    margin-top: 45px;
    font-size: 14px;
  }
  .img {
    position: absolute;
    top: 28px;
    right: 30px;
    width: 45px;
    height: 45px;
  }
  .money {
    font-weight: bold;
    margin-bottom: 38px;
    margin-top: 10px;
    font-family: GothamSSm;
    .symbol {
      font-size: 24px;
      position: relative;
      top: 0px;
    }
    .int {
      font-size: 26px;
    }
    .float {
      font-size: 26px;
    }
  }
  .avatar {
    margin: -40px auto 0;
    // display: block;
    width: 50px;
    height: 50px;
    border: 4px solid #fff;
    box-shadow: 0 0 0 1px #03bfc6;
  }
  .hintT {
    margin-top: 16px;
    .apiDoc {
      color: #03bfc6;
      cursor: pointer;
    }
  }
  .nameWrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    .name {
      width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;

      font-size: 16px;
      font-weight: 600;
    }
    .tag {
      // height: 24px;
      background: #f0f0f0;
      border-radius: 16px;
      padding: 4px 11px;
      font-size: 12px;
      margin-top: 5px;
      margin-bottom: 25px;
    }
  }
  .footer {
    width: 90%;
    height: 6px;
    position: absolute;
    bottom: 0;
    left: 5%;
    display: flex;
    .one_ {
      width: 20%;
      height: 6px;
      background: #face72;
      border-radius: 4px 0 0 4px;
    }
    .two_ {
      width: 20%;
      height: 6px;
      background: #445ee9;
    }
    .three_ {
      width: 60%;
      height: 6px;
      background: #00c3c8;
      border-radius: 0 4px 4px 0;
    }
  }
}
.last {
  text-align: center;
  padding: 0 10px;
}
.box-card2 {
  height: 400px;
  border-radius: 14px;
  &.last {
    position: relative;
  }
  .order {
    position: absolute;
    left: 30px;
    bottom: 30px;
    width: calc(100% - 60px);
    // margin-top: -25px;
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    color: #666;
  }
  .progress {
    margin-top: 40px;
    // box-shadow: 0px 8px 18px 0px rgba(#44E3B1,0.5);
    border-radius: 50%;
  }
  :deep(.el-progress path:first-child) {
    stroke: (#3fbbbc);
  }
  .trans {
    position: relative;
    top: -120px;
    .transNum {
      font-size: 24px;
      font-weight: 600;
    }
  }
  .orderNum {
    font-size: 26px;
    font-weight: bold;
    color: #000;
    font-family: GothamSSm;
  }
}
.box-card3 {
  height: 480px;
  border-radius: 14px;
}

.ofenFun {
  margin-top: 30px;
}

.echarts {
  position: relative;
  .timeCycle {
    position: absolute;
    top: 18px;
    right: 32px;
    width: 300px;
    line-height: 26px;
    height: 34px;
    display: flex;
    border: 1px solid #f0f0f0;
    border-radius: 20px;
    padding: 4px;
    div {
      flex: 1;
      text-align: center;
      border-radius: 20px;
      color: #bfbfbf;
      cursor: pointer;
    }
    .activeTime {
      background: #3fbbbc;
      color: #fff;
      box-shadow: 5px 5px 10px 0px rgba(63, 187, 188, 0.25);
    }
  }
}
.finance {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
}
.orderText {
  font-size: 18px;
  font-weight: 600;
  text-align: left;
  margin-bottom: 20px;
}
.box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  height: 50px;
  border-radius: 6px;
  box-shadow: 0px 1px 4px 0px rgba(212, 224, 233, 0.5);
  padding: 0 24px;
  margin-bottom: 20px;
  cursor: pointer;
  .box_title {
    color: #666;
    font-size: 14px;
    font-weight: bold;
  }
}
:deep(.el-card) {
  overflow: inherit;
}
:deep(.el-progress__text) {
  font-size: 52px;
  font-weight: bold;
}
</style>
